<template>
  <div class="recommend">
    <div class="hea">你可能还想要</div>
    <RecommendList :recommendList="recommendList"></RecommendList>
  </div>
</template>

<script>
import RecommendList from '@/components/common/RecommendList'
import { getRecommend } from '@/http/index.js'
export default {
  data() {
    return {
      recommendList: [],
    }
  },
  components: {
    RecommendList,
  },
  created() {
    this.fetchRecommend()
  },
  methods: {
    fetchRecommend() {
      getRecommend().then((res) => {
        this.recommendList = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.recommend {
  width: 100%;
  .hea {
    margin: 40px 0;
    padding: 40px 0;
    display: flex;
    align-items: center;
    color: #969799;
    border: 0 solid #999;
    width: 100%;
    height: 50px;
    font-size: 26px;
    line-height: 50px;
    background-color: white;
    &::before,
    &::after {
      display: block;
      content: '';
      flex: 1;
      height: 1px;
      box-sizing: border-box;
      border: inherit;
      border-width: 1px 0 0;
    }
    &::before {
      margin-right: 16px;
    }
    &::after {
      margin-left: 16px;
    }
  }
}
</style>
